<template>
    <div id="index">
        <index-header />
        <swiper-container/>
        <ball name="阅读收益"/>
        <tabbar />
    </div>
</template>

<script>
import cache from '@/utils/cache'
import { mapState, mapActions, mapMutations } from 'vuex'
import ball from "@/components/Ball/index"
import tabbar from "@/components/Tabbar/index"
import indexHeader from "./components/index_header"
import swiperContainer from './components/swiperContainer'
import { RefreshToken } from '@/api/login.js'
export default {
    components: { ball, tabbar, indexHeader, swiperContainer },
    data(){
        return{
            
        }
    },
    computed:{
        ...mapState('app', [
          'isShowLoginModal'
        ])
    },
    methods: {
        ...mapActions('index', [
            'get_indexColumn_data'
        ]),
        ...mapMutations('user', [
            'set_DLBvalue',
        ]),
        refresh(){
            RefreshToken().then(res => {
                if( res.code == 200 ){
                    // 当前token有效
                    this.get_indexColumn_data()
                }else{
                    // 当前token无效
                    cache.setLocal('token', '');
                    this.get_indexColumn_data()
                }
            })
        },
    },
    activated(){
        cache.removeSession('index_Column')
        this.get_indexColumn_data()
    },
    watch:{
        isShowLoginModal(val){
            if(!val){
                cache.removeSession('index_Column')
                this.refresh()
            }
        }
    },
    beforeRouteLeave(to,from,next) {
        this.set_DLBvalue(0)
        next()
    }
}
</script>

<style lang="stylus" scoped>
#index {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>